import react,{Component} from 'react'
import {Input, Button,Table,Icon,message} from 'antd'
const InputGroup = Input.Group;
const ButtonGroup = Button.Group;

import {devmacList, activate, deactivate,disabled, batchImport} from '../../services/devmac'
import {dateFormat} from '../../utils/format'

class DevmacMana extends Component{
    state = {
        data:[],
        pagination: {},
        loading: false,
        selectedRows:[],
        dev_imei:"",
    }
    handleTableChange = (pagination, filters, sorter) => {
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        this.setState({
          pagination: pager,
        });
        console.log(sorter)
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order=="ascend"?"asc":"desc",
          ...filters,
        });
      }
    fetch = (params = {}) => {
        this.setState({ loading: true });
        
        devmacList(params).then(data =>{
          const pagination = { ...this.state.pagination };
          pagination.total = data.total;
          pagination.pageSize = data.per_page
          
          this.setState({
            loading: false,
            data: data.data,
            pagination,
          })
        })
        
      }
      componentDidMount() {
        const data = {
            results:10,
            page:1
        }
        this.fetch(data)
      
      }
    reloadTable=()=>{
        const pager = { ...this.state.pagination };
        this.setState({
          pagination: pager,
        });
        this.fetch({
          results: pager.pageSize,
          page: pager.current,
        });
    }
    devImeiChange=(e)=>{
        const {value} = e.target
        this.setState({
            dev_imei:value
        })
    }
    add=()=>{
        const devImei = this.state.dev_imei;
        if(!devImei){
            return message.error('请填写IMEI号!');
        }
        const params ={
            dev_imei:devImei.split(',')
        }
        batchImport(params).then(data=>{
            this.reloadTable();
            message.success('批量添加成功!');
        })
    }
    activate=(row)=>{
        activate(row).then(data =>{
            this.reloadTable();
            message.success('激活成功!');
        })
    }
    deactivate=(row)=>{
        deactivate(row).then(data =>{
            this.reloadTable();
            message.success('取消激活成功!');
        })
    }
    disabled=(row)=>{
        disabled(row).then(data =>{
            this.reloadTable();
            message.success('禁用成功!');
        })
    }
    batchActivate=()=>{
        if(this.state.selectedRows.length == 0){
            return message.error('请先选中!');
        }
        console.log(this.state.selectedRows)
    }
    render(){
        const col =[
            {title:'编码',dataIndex:'id',sorter: true,},
            {title:'mac地址',dataIndex:'dev_mac',sorter: true,},
            {title:'设备IMEI',dataIndex:'dev_imei',sorter: true,},
            {title:'ip地址',dataIndex:'reg_ip',sorter: true,},
            {title:'注册时间',dataIndex:'reg_time',sorter: true,
            render: (text, record) => {
                return dateFormat("yyyy-MM-dd hh:mm:ss", text*1000)
            }},
            {title:'激活时间',dataIndex:'activate_time',sorter: true,
            render: (text, record) => {
                return dateFormat("yyyy-MM-dd hh:mm:ss", text*1000)
            }},
            {title:'激活次数',dataIndex:'activate_num',sorter: true,},
            {title:'数据状态',dataIndex:'data_state',sorter: true,
            render: (text, record) => {
                if(text===0){
                    return '已激活'
                }else if(text===1){
                    return '未激活'
                }else{
                    return '被拒绝'
                }
            }},
            {title:'',dataIndex:'', render: (text, record) => {
                return (
                    <div style={{textAlign:'center'}}>
                        <a title="激活" onClick={()=>this.activate(record)}>
                            <Icon type="check-circle-o" style={{fontSize:'16px',fontWeight:700,color:'#2185d0',marginRight:10}} />
                        </a>
                        <a title="取消激活" onClick={()=>this.deactivate(record)}>
                            <Icon type="close-circle-o" style={{fontSize:'16px',fontWeight:700,color:'#fbbd08',marginRight:10}} />
                        </a>
                        <a title="禁用" onClick={()=>this.disabled(record)}>
                            <Icon type="minus-circle-o" style={{fontSize:'16px',fontWeight:700,color:'#db2828'}} />
                        </a>
                    </div>
                )
            }},
        ]
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    selectedRows:selectedRows,
                })
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
              disabled: record.name === 'Disabled User', // Column configuration not to be checked
            }),
          };
        return (
            <div className="myContainer" style={{position:"relative"}}>
                 <Input placeholder=" 批量添加IMEI号，IMEI号是15位长度的数字串,IMEI号间用逗号隔开..." style={{width:"80%"}} onChange={val => this.devImeiChange(val)}  />
                 <Button onClick={this.add}>批量添加</Button>
            
           
                <Table
                    rowSelection={rowSelection}
                    size="small" rowKey={record => record.id}
                    columns={col} dataSource={this.state.data} 
                    pagination={this.state.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange} 
                    bordered
                    style={{marginTop:'10px'}}
                    />
                <div style={{position:"absolute",bottom:'15px'}}>
                    <Button onClick={this.batchActivate}>批量激活</Button>
                </div>
            </div>
        )
    }
}

export default DevmacMana